#{extends 'main.html' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Operations</title>
</head>

<style type="text/css">
table.hovertable {
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}

table.hovertable th {
	background-color: #c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.hovertable tr {
	background-color: #d4e3e5;
}

table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>
<script type="text/javascript">
	function totalCheck() {

		var totalIn = document.getElementsByClassName("totalIn");
		var totalOut = document.getElementsByClassName("totalOut");
		var New = document.getElementsByClassName("New");
		var sales = document.getElementsByClassName("sales");
		var lost = document.getElementsByClassName("lost");

		//alert(totalIn[0].value + " // " + totalOut[0].innerText - New[0].innerText - lost[0].innerText);
		var minus = totalOut[0].value - New[0].value - lost[0].value
				- sales[0].value;
		alert(minus);

		for ( var i = 0; i < totalIn.length; i++) {

			if (totalIn[i].value != totalOut[i].innerText - New[i].innerText
					- lost[i].innerText) {

				var x = i;
				//alert("Total In is not Equal Total Out in line " + ++x)
				alert(totalIn[i].value + " // " + totalOut[i].innerText
						- New[i].innerText - lost[i].innerText);
			}

		}

	}
</script>
<body>
	#{if flash.error}
	<h1 style="color: #c00"> ${flash.error}</h1>


	#{/if}

	<form action="@{Application.createOperationReport()}" method="post">
		<table align="left" class="hovertable" style="float: left;">

			<tr>
				<th>Item</th>
				<th>Total Out</th>
				<th>Total In</th>
				<th>Sales</th>
				<th>Lost</th>
			</tr>



			#{list items:renderProducts, as:'Product'}
			<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
				<th>${Product.name}</th>
				<td ><input type="text" name="totalOut" value=${Product.quantity} readonly="readonly" ></td>
				<td><input class="totalIn"  name="totalIn" style="width: 50px;" type="text" required>
					
				</td>
				<td><input name="sales" class="sales" style="width: 50px;" type="text" required></td>
				<td>
					<input name="lost" class="lost" style="width: 50px;"type="text" required>
				</td>
					
			</tr>

			#{/list}
			<tr><td><input  type="submit" value="submit" />
			</td></tr>
		</table>


		<table class="hovertable" style="float: left;">
			<tr>
				<th>Dirty</th>
			</tr>

			#{list items:dirty, as:'Dirty'}
			<tr onmouseover="this.style.backgroundColor='#ffff66';"
				onmouseout="this.style.backgroundColor='#d4e3e5';">
				<td style="height: 26px">${Dirty}</td>
			</tr>

			#{/list}
		</table>
		<table class="hovertable" style="float: left;">

			<tr>
				<th>Clean</th>
			</tr>
			#{list items:clean, as:'Clean'}
			<tr onmouseover="this.style.backgroundColor='#ffff66';"
				onmouseout="this.style.backgroundColor='#d4e3e5';">
				<td style="height: 26px">${Clean}</td>

			</tr>

			#{/list}
		</table>

		<table class="hovertable" style="float: left;">

			<tr>
				<th>New</th>

			</tr>
			#{list items:new_products, as:'New'}
			<tr onmouseover="this.style.backgroundColor='#ffff66';"
				onmouseout="this.style.backgroundColor='#d4e3e5';">

				<td class="New" style="height: 26px">${New}
				</td>
				


			</tr>

			#{/list}


		</table>
		<br>
		
	</form>




</body>
</html>